@import "../config.less";

@cls: @{perfix}-tree;

.@{cls} {
    position: relative;
    overflow: auto;
    white-space: nowrap;

    ul {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        overflow: hidden;
    }

    li {
        display: flex;
        align-items: center;
        margin: 5px 0;
        cursor: pointer;
        color: #555;

        > span {
            padding: 4px;
            transition: background .3s ease-out;
            border-radius: 2px;
        }
    }

    i {
        font-size: 9px;
        padding: 2px 10px;
        transform: rotate(-90deg);
        transition: transform .1s ease-out;
    }

    i.@{cls}-expend-arrow {
        transform: rotate(0deg);
        transition: transform .1s ease-out;
    }

    .@{perfix}-checkbox-content {
        padding: 3px;
        border-radius: 2px;
        transition: background .3s ease-out;

        &:hover {
            background: #f2f2f2;
            transition: background .3s ease-out;
        }
    }
}

.@{cls}-scroll {
    padding-bottom: 30px;
}
